<template>
    <div class="login">
      <div class="container">
         <form class="loginForm" :v-model="loginForm" >
            <div>LQ体育</div>
            <div class="inputBox">
               <input type="number" required v-model.trim="loginForm.loginKey">
               <span class="input-title">输入手机号</span>
            </div>
            <div class="inputBox sec">
               <input type="number" required v-model.trim="loginForm.loginVlue">
               <span class="input-title">短信验证码</span>
               <span class="input-send" @click="sendCodeMsg">发送验证码</span>
            </div>
            <div class="submit-div">
               <input class="submit-btn" type="button" value="提交" @click="smsLogin()">
            </div>
        </form>
      </div>
      <div>
         <el-dialog title="验证码" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false">
               <div class="dialog-content">
                  <div class="left-section">
                     <img :src="kaptchaImg" alt="验证码图片"/>
                  </div>
                  <div class="right-section">
                     <el-input v-model="captcha" placeholder="请输入验证码"></el-input>
                  </div>
               </div>
               <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible = false">取消</el-button>
                  <el-button type="primary" @click="submit">确定</el-button>
               </span>
         </el-dialog>
      </div>
   </div>
 </template>
   
 <script>
 import {kaptcha} from "@/Api/index"
 export default {
    name : 'LoginView',
    data(){
      return {
         loginForm:{
            loginKey:'',
            loginVlue:''
         },
         loginFromDataError:{
            loginKeyErrorMsg:'请填写正确的手机号',
            loginValueErrorMsg:'请填写短信验证码'
         },
         kaptchaImg:'',
         dialogVisible: false,
         captcha: ""
      }
    },
    methods:{
      smsLogin(){
         console.log(this.loginForm.loginKey)
         console.log(this.loginForm.loginVlue)
         this.checkInputError();
      },
      // 获取图形验证码
      getKaptcha(){
         kaptcha().then((res) => {
            console.log(res.data)
            this.kaptchaImg = res.data.baseEncode
         })
      },
      // 发送短信验证码
      sendCodeMsg(){
         if(this.showCheckError()){
            this.$message.error(this.loginFromDataError.loginKeyErrorMsg);
         }else{
            this.openDialog();
            this.captcha = '';
         }
      },
      // 检查手机号是否正确填写
      showCheckError(){
         var reg = /^1[34578]\d{9}$/
         return !reg.test(this.loginForm.loginKey)
      },
      // 校验 手机号和验证码是否正确填写
      checkInputError(){
         if(this.showCheckError()){
            this.$message.error(this.loginFromDataError.loginKeyErrorMsg);
            return;
         }
         var regex = /^\d{4}$/;
         if(!regex.test(this.loginForm.loginVlue)){
            this.$message.error(this.loginFromDataError.loginValueErrorMsg);
         }
      },
      openDialog() {
         this.dialogVisible = true;
         this.kaptchaImg = this.getKaptcha()
      },
      submit() {
         // 处理提交逻辑
         console.log("验证码为:", this.captcha);
         this.dialogVisible = false;
      }
    }
    
 }
 </script>

 <style scoped>

.loginForm{
   width: 500px;
   gap: 40px;
   padding-top: 30px;
   display: flex;
   flex-direction: column;
   align-items: center;
   min-height: 60vh;
   background: #1d2b3a;
}
.inputBox{
   position: relative;
   width: 250px;
}
.inputBox input{
   width: 100%;
   padding: 10px;
   border: 1px solid rgba(255, 255, 255, 0.25);
   background: #1d2b3a;
   border-radius: 5px;
   outline: none;
   color: #fff;
   font-size: 16px;
   -webkit-inner-spin-button:none;
   -webkit-outer-spin-button:none;
}


.inputBox .input-title{
   position: absolute;
   left: 0;
   padding: 10px;
   pointer-events: none;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.25);
   transition: .5s;
}

.inputBox .input-send{
   position: absolute;
   right: 0;
   padding: 10px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   font-size: 12px;
   color: rgba(255, 255, 255, 0.25);
}

.inputBox .input-send:hover{
   cursor: pointer;
   color: rgba(255, 255, 255, 0.5);
}

.inputBox input:valid ~ .input-title,
.inputBox input:focus ~ .input-title{
   color: #00dfc4;
   transform: translateX(10px) translateY(-7px);
   font-size: 12px;
   padding: 0 10px;
   background: #1d2b3a;
   border-left: 1px solid #00dfc4;
   border-right: 1px solid #00dfc4;
   letter-spacing: 4px;
}

.inputBox.sec input:valid ~ .input-title,
.inputBox.sec input:focus ~ .input-title{
   background: #00dfc4;
   color: #1d2b3a;
   border-radius: 2px;
}

.submit-dev{
   width: 250px;
}

.submit-btn{
   display: block;
   padding: 10px;
   background: #1c2b3a;
   border: 1px solid rgba(255, 255, 255, 0.25);
   width: 250px;
   border-radius: 5px;
   font-size: 16px;
   color: rgba(255, 255, 255, 0.25);
}

.submit-btn:hover{
   display: block;
   padding: 10px;
   /* background: rgb(28, 43, 58); */
   background: rgb(32, 47, 62);
   border: 1px solid rgba(255, 255, 255, 0.25);
   width: 250px;
   border-radius: 5px;
   font-size: 16px;
   color: rgba(255, 255, 255, 0.25);
}


.dialog-content {
  display: flex;
  align-items: center;
}

.left-section {
  flex: 1;
}

.right-section {
  flex: 1;
  padding-left: 20px;
}

.dialog-footer {
  text-align: right;
}
 </style>